<template>
	<view style="min-height: 100vh;background: #F3F3F3;">
		<view style="padding: 16upx 24upx 236upx;">
			<view class="head" style="color: red;margin-bottom: 16rpx;" v-if="info.refuse_reason">
				拒绝原因：{{info.refuse_reason}}
			</view>
			<view class="head">
				<view class="headT">{{info.name?info.name:"无"}}</view>
				<view class="headB">{{info.address?info.address:"无"}}</view>
				<view style="font-size: 20upx;color: red;margin-top: 20upx;">本页面上传资料备案登记使用。仅用户自己可见。不对外展示</view>
			</view>
			<view class="business">
				<view class="businessT">营业执照备案</view>
				<view class="businessB" v-if="!businessImg" @click="choiceBusiness">
					<view class="businessBC">
						<image src="../../static/mine/add_white.png"></image>
					</view>
					<view class="businessBB">上传营业执照</view>
				</view>
				<image :src="getImage(businessImg)" class="businessImg" mode="widthFix" v-if="businessImg" @click="choiceBusiness"></image>
			</view>
			
			<view class="legalPerson">
				<view class="legalPersonT">法人实名认证</view>
				<view class="legalPersonB">
					<view class="legalPersonBL" v-if="!idFrontImg" @click="choiceIdFront">
						<view>
							<image src="../../static/mine/add_white.png"></image>
						</view>
						<view>上传身份证人像面</view>
					</view>
					<image mode="widthFix" :src="getImage(idFrontImg)" v-if="idFrontImg" @click="choiceIdFront"></image>
					<view class="legalPersonBL" v-if="!idBackImg" @click="choiceIdBack">
						<view>
							<image src="../../static/mine/add_white.png"></image>
						</view>
						<view>上传身份证国徽面</view>
					</view>
					<image mode="widthFix" :src="getImage(idBackImg)" v-if="idBackImg" @click="choiceIdBack"></image>
				</view>
			</view>
			
			<view class="legalPerson">
				<view class="legalPersonT" style="display: flex;align-items: center;" @click="toIntro">
					<view>其他证件（选填）</view>
					<image src="/static/index/intro.png" style="width: 32upx;height: 32upx;"></image>
				</view>
				<view class="legalPersonB">
					<view style="display: flex;flex-wrap: wrap;">
						<view class="imgWrap" @click="choiceImg1">
							<image src="../../static/mine/photo.png"></image>
						</view>
						<view v-for="(item,index) in imageUrlArr" :key="index" class="imgWrapsBox">
							<view class="imgWraps" :style="{'background-image':'url('+getImage(item)+')'}"></view>
							<view style="line-height: 60upx;line-height: 60upx;text-align: center;color: red;font-size: 28upx;" :data-index="index" @click="delImg">删除</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<checkbox-group @change="selectProto">
			<view class="bottomBtn">
				<view class="bottomBtnT" v-if="(!info.type&&info.type!==0&&info.type!=='0')||info.type==2">
					<checkbox :value="true" class="bottomBtnTL" color="#FFAC3F" />
					<view class="bottomBtnTR">
						我已阅读并同意<text @click.stop="toXy">《商户服务协议》</text>
					</view>
				</view>
				<view class="bottomBtnB" @click="submit" v-if="!info.type&&info.type!==0&&info.type!=='0'">提交审核</view>
				<view class="bottomBtnB" v-if="info.type==1">已认证</view>
				<view class="bottomBtnB" v-if="info.type==2" @click="submit">认证失败,重新提交</view>
				<view class="bottomBtnB" v-if="info.type===0||info.type==='0'">审核中</view>
			</view>
		</checkbox-group>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				agreeFlag:false,
				businessImg:"",
				idFrontImg:"",
				idBackImg:"",
				id:"",
				area_id:"",
				info:{},
				imageUrlArr:[],
				reqFlag:true
			}
		},
		onLoad(options) {
			this.id = options.id;
			let data = uni.getStorageSync("authInfo");
			this.info = data;
			if(data.id){
				this.businessImg = data.business_license_image;
				this.idFrontImg = data.id_positive_image;
				this.idBackImg = data.id_reverse_image;
				for(let i=0;i<data.ShopAuthenticationImage.length;i++){
					this.imageUrlArr.push(data.ShopAuthenticationImage[i].image_url);
				}
			}
		},
		methods: {
			toIntro(){
				uni.navigateTo({
					url:"/pages/pageone/pages/About-us/About-us?index=6"
				})
			},
			toXy(){
				uni.navigateTo({
					url:"/pages/pageone/pages/About-us/About-us?index=5"
				})
			},
			delImg(e){
				if(this.info.type==1||(this.info.type===0||this.info.type==='0')){
					return false;
				}
				let index = e.target.dataset.index || e.currentTarget.dataset.index;
				this.imageUrlArr.splice(index,1);
			},
			choiceImg1(){
				let _this = this;
				if(this.info.type==1||(this.info.type===0||this.info.type==='0')){
					return false;
				}
				uni.chooseImage({
					count:9,
					sizeType:["compressed"],
					success(result) {
						
						_this.reqFlag = false;
						for(let i=0;i<result.tempFilePaths.length;i++){
							app.$vm.updataAvator(result.tempFilePaths[i]).then(res=>{
								
								_this.reqFlag = true;
								_this.imageUrlArr.push(res);
							});
						}
						
					},
					fail:err=>{
						if(err.errMsg!='chooseImage:fail cancel'){
							app.$vm.checkAuth("scope.camera").then(resultConfirm=>{
								if(resultConfirm){
									uni.showModal({
										title:"系统繁忙，请稍后再试"
									})
								}else{
									uni.showModal({
										title:"请检查摄像头和相册权限后重试"
									})
								}
							})
						}
					}
				})
			},
			submit(){
				if(!this.reqFlag){
          this.$refs.uToast.show({
            title:"不能重复提交,请重新再试",
            type:"error",
            duration:2000
          });
          return false;
				}
				this.reqFlag = false;
				let obj = {};
				obj.area_id = 
				obj.shop_id = this.id;
				obj.user_id = uni.getStorageSync("userId");
				obj.business_license_image = this.businessImg;
				obj.id_positive_image = this.idFrontImg;
				obj.id_reverse_image = this.idBackImg;
				if(!this.agreeFlag){
					this.$refs.uToast.show({
						title:"请先阅读并同意《商户服务协议》",
						type:"error",
						duration:2000
					})
					return false;
				}
				if(!this.businessImg){
					this.$refs.uToast.show({
						title:"请上传营业执照",
						type:"error",
						duration:2000
					})
					return false;
				}
				if(!this.idFrontImg){
					this.$refs.uToast.show({
						title:"请上传法人身份证正面照",
						type:"error",
						duration:2000
					})
					return false;
				}
				if(!this.idBackImg){
					this.$refs.uToast.show({
						title:"请上传法人身份证反面照",
						type:"error",
						duration:2000
					})
					return false;
				}
				let newObj = {};
				newObj.data = obj;
				newObj.images = this.imageUrlArr;
				this.$u.api.shopAuthenticationAdd(obj).then(res=>{
					
					this.$refs.uToast.show({
						title:"已提交审核",
						type:"success",
						duration:2000
					})
					let pages = getCurrentPages();
					pages[pages.length-2].$vm.getAuth();
					setTimeout(()=>{
						this.reqFlag = true;
						uni.navigateBack({
							delta:1
						})
					},1500)
				})
				.catch(err=>{
					this.reqFlag = true;
				})
			},
			getImage(url){
				if(url&&(url.indexOf("http://")!=-1||url.indexOf("https://")!=-1)){
					return url;
				}else{
					return app.$vm.globalData.imgBaseUrl + url;
				}
			},
			choiceIdFront(e){
				if(this.info.type==1||(this.info.type===0||this.info.type==='0')){
					return false;
				}
				uni.chooseImage({
					count:1,
					sizeType:["compressed"],
					success:result=>{
						uni.showLoading({
							title:"上传中..."
						})
						this.reqFlag = false;
						app.$vm.updataAvator(result.tempFilePaths[0]).then(res=>{
							this.reqFlag = true;
							this.idFrontImg = res;
							uni.hideLoading()
						});
					},
					fail:err=>{
						if(err.errMsg!='chooseImage:fail cancel'){
							app.$vm.checkAuth("scope.camera").then(resultConfirm=>{
								if(resultConfirm){
									uni.showModal({
										title:"系统繁忙，请稍后再试"
									})
								}else{
									uni.showModal({
										title:"请检查摄像头和相册权限后重试"
									})
								}
							})
						}
					}
				})
			},
			choiceIdBack(e){
				if(this.info.type==1||(this.info.type===0||this.info.type==='0')){
					return false;
				}
				uni.chooseImage({
					count:1,
					sizeType:["compressed"],
					success:result=>{
						uni.showLoading({
							title:"上传中..."
						})
						this.reqFlag = false;
						app.$vm.updataAvator(result.tempFilePaths[0]).then(res=>{
							this.idBackImg = res;
							this.reqFlag = true;
							uni.hideLoading()
						});
					},
					fail:err=>{
						if(err.errMsg!='chooseImage:fail cancel'){
							app.$vm.checkAuth("scope.camera").then(resultConfirm=>{
								if(resultConfirm){
									uni.showModal({
										title:"系统繁忙，请稍后再试"
									})
								}else{
									uni.showModal({
										title:"请检查摄像头和相册权限后重试"
									})
								}
							})
						}
					}
				})
				
			},
			selectProto(e){
				
				if(e.detail.value.length>0){
					this.agreeFlag = true;
				}else{
					this.agreeFlag = false;
				}
			},
			choiceBusiness(){
				if(this.info.type==1||(this.info.type===0||this.info.type==='0')){
					return false;
				}
				uni.chooseImage({
					count:1,
					sizeType:["compressed"],
					success:result=>{
						uni.showLoading({
							title:"上传中..."
						})
						this.reqFlag = false;
						app.$vm.updataAvator(result.tempFilePaths[0]).then(res=>{
							this.businessImg = res;
							this.reqFlag = true;
							uni.hideLoading()
						});
					},
					fail:err=>{
						if(err.errMsg!='chooseImage:fail cancel'){
							app.$vm.checkAuth("scope.camera").then(resultConfirm=>{
								if(resultConfirm){
									uni.showModal({
										title:"系统繁忙，请稍后再试"
									})
								}else{
									uni.showModal({
										title:"请检查摄像头和相册权限后重试"
									})
								}
							})
						}
					}
				})
				
			}
		}
	}
</script>

<style scoped>
	.imgWrap{
		width: 112upx;
		height: 112upx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8upx;
		box-sizing: border-box;
		border: 2upx dashed #707070;
		margin-right: 20upx;
	}
	.imgWraps{
		width: 112upx;
		height: 112upx;
		border-radius: 8upx;
		box-sizing: border-box;
		/* margin-right: 20upx; */
		background-position: center;
		background-size: cover;
		/* margin-bottom: 20upx; */
	}
	.imgWrapsBox{
		width: 112upx;
		border-radius: 8upx;
		box-sizing: border-box;
		margin-right: 20upx;
		margin-bottom: 20upx;
	}
	.imgWrap>image{
		width: 48upx;
		height: 48upx;
	}
	
	
	.bottomBtn{
		width: 100%;
		/* height: 204upx; */
		position: fixed;
		left: 0;
		bottom: 0;
		background: white;
		box-sizing: border-box;
		padding: 16upx 24upx 32upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.bottomBtnT{
		display: flex;
		align-items: center;
		margin-bottom: 16upx;
	}
	.bottomBtnTL{
		transform: scale(.6);
	}
	.bottomBtnTR{
		font-size: 24upx;
		line-height: 24upx;
		/* margin-left: 8upx; */
		color: #333333;
	}
	.bottomBtnTR>text{
		font-size: 24upx;
		line-height: 24upx;
		color: #409EFF;
	}
	.bottomBtnB{
		width: 100%;
		height: 100upx;
		line-height: 100upx;
		text-align: center;
		border-radius: 8upx;
		background: #FFAC3F;
		color: white;
		font-size: 28upx;
	}
	
	
	
	.legalPerson{
		width: 100%;
		box-sizing: border-box;
		padding: 32upx 24upx;
		background: white;
		border-radius: 20upx;
		margin-top: 16upx;
	}
	
	.legalPersonT{
		font-size: 28upx;
		color: #333333;
		font-weight: bold;
		margin-bottom: 24upx;
	}
	.legalPersonB{
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	.legalPersonB>image{
		width: 320upx;
		border-radius: 8upx;
	}
	.legalPersonBL{
		width: 320upx;
		height: 170upx;
		box-sizing: border-box;
		border: 2upx dashed #FFAC3F;
		border-radius: 8upx;
		background: #FFF5EA;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.legalPersonBL>view:nth-child(1){
		width: 72upx;
		height: 72upx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #FFAC3F;
		margin-bottom: 14upx;
	}
	.legalPersonBL>view:nth-child(1)>image{
		width: 48upx;
		height: 48upx;
	}
	.legalPersonBL>view:nth-child(2){
		font-size: 20upx;
		line-height: 20upx;
		color: #666666;
	}
	
	
	
	.business{
		width: 100%;
		padding: 32upx 24upx;
		border-radius: 20upx;
		background: white;
		margin-top: 16upx;
	}
	.businessT{
		font-size: 28upx;
		color: #333333;
		font-weight: bold;
		margin-bottom: 24upx;
	}
	.businessB{
		width: 100%;
		height: 420upx;
		border: 2upx dashed #FFAC3F;
		background: #FFF5EA;
		border-radius: 8upx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		flex-direction: column;
	}
	.businessImg{
		width: 100%;
		border-radius: 8upx;
	}
	.businessBC{
		width: 72upx;
		height: 72upx;
		border-radius: 50%;
		background: #FFAC3F;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 16upx;
	}
	.businessBC>image{
		width: 48upx;
		height: 48upx;
	}
	.businessBB{
		font-size: 20upx;
		line-height: 20upx;
		text-align: center;
		color: #666666;
	}
	
	
	
	.head{
		width: 100%;
		box-sizing: border-box;
		background: white;
		border-radius: 20upx;
		padding: 34upx 24upx;
	}
	.headT{
		width: 100%;
		font-size: 28upx;
		color: #333333;
		font-weight: bold;
		line-height: 28upx;
	}
	.headB{
		line-height: 20upx;
		font-size: 20upx;
		color: #333333;
		margin-top: 20upx;
	}
</style>
